<template>
	<view class="shop-page">
		<!-- 楼层装修店铺信息 -->
		<view>
			<u-navbar :border-bottom="false">
				<u-search v-model="keyword" @search="search" @click="search" placeholder="请输入搜索"></u-search>
			</u-navbar>
			<view class="wrapper">
				<!-- 店铺信息模块 -->
				<view class="store flex">

					<u-image border-radius="70" width="140" height="140"
						:src="storeInfo.storeLogo || config.defaultUserPhoto" mode="aspectFill">
					</u-image>
					<view class="box">
						<view class="store-name">
							{{ storeInfo.storeName || "" }}
							<view style="margin-left: 21rpx;font-size: 24rpx;color: #999;">
								商品数量:{{storeInfo.goodsNum}}
							</view>
							<!-- <u-icon style="margin-left: 10rpx" name="arrow-right"></u-icon> -->
						</view>
						<view style="color: #333;">
							{{storeInfo.marketName}}{{storeInfo.marketAreaName}}{{storeInfo.ddCode}}
						</view>
						<view class="flex store-message" style="margin-top: 10rpx;">
							<view class="collection">
								<view class="collection-btn" @click="whetherCollection">
									{{ isCollection ? "已关注" : "关注" }}
								</view>
							</view>

							<view @click="showQrcode = true" style="background: #ff3c2a;
							padding: 6rpx 20rpx;
							font-size: 22rpx;
							color: #fff;
							border-radius: 100px;
							text-align: center;margin-left: 15rpx;">
								查看小程序码
							</view>
							<view @click="callPhone(storeInfo.linkPhone)" style="background: #ff3c2a;
							padding: 6rpx 20rpx;
							font-size: 22rpx;
							color: #fff;
							border-radius: 100px;
							text-align: center;margin-left: 15rpx;">
								联系客服
							</view>
							<!-- <view>
								<span>{{ storeInfo.collectionNum || 0 }}</span>关注
							</view>
							<view>
								<span>{{ storeInfo.goodsNum || 0 }}</span>件商品
							</view> -->
						</view>
					</view>
					<!-- <view style="display: flex;align-items: center;flex-direction: column;">
						<image :src="qrcodeImg" style="width: 140rpx;height: 140rpx;"></image>
						<view >
							保存小程序码
						</view>
					</view> -->
					<!-- <view class="collection">

						<view class="collection-btn" @click="whetherCollection" style="margin-top: 20rpx;">
							{{ isCollection ? "已关注" : "关注" }}
						</view>
					</view> -->
				</view>
				<!-- 店铺简介 -->
				<!-- <view class="store-desc wes-2">
          {{ storeInfo.storeDesc || '' }}
        </view> -->

				<!-- 联系客服 -->
				<!-- <view class="kefu" @click="talk">
					<u-icon name="kefu-ermai"></u-icon>
					联系客服
				</view> -->
			</view>
			<view class="navbar">
				<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick('', 0)">综合</view>
				<view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick('createTime', 1)">新品
				</view>
				<view class="nav-item" :class="{ current: filterIndex === 3 }" @click="tabClick('buyCount', 3)">销量
				</view>
				<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick('price', 2,)">
					<text>价格</text>
					<view class="p-box">
						<view class="index-nav-arrow">
							<image class="img" src="/static/index/arrow-up-1.png"
								v-if="goodsParams.sort === 'price' && goodsParams.order === 'asc'" mode="aspectFit">
							</image>
							<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
						</view>
						<view class="index-nav-arrow">
							<image class="img" src="/static/index/arrow-down.png"
								v-if="goodsParams.sort === 'price' && goodsParams.order === 'desc'" mode="aspectFit">
							</image>
							<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="nav-item" @click="showTime = !showTime">
					<text style="margin-right: 5rpx;" v-if="timeIndex==0">时间</text>
					<text style="margin-right: 5rpx;color: #ff3c2a;" v-else>{{timeIndex}}日内</text>
					<u-icon v-if="!showTime" name="arrow-down" size="20"></u-icon>
					<u-icon v-else name="arrow-up" size="20"></u-icon>
				</view>
				<view class="time-pop" v-if="showTime">
					<view class="time-list">
						<view class="time-item" :class="timeIndex==0?'timeActive':''" @click="changeTime(0)">全部</view>
						<view class="time-item" :class="timeIndex==1?'timeActive':''" @click="changeTime(1)">1日内</view>
						<view class="time-item" :class="timeIndex==3?'timeActive':''" @click="changeTime(3)">3日内</view>
					</view>
					<view class="time-list" style="margin-top: 20rpx;">
						<view class="time-item" :class="timeIndex==7?'timeActive':''" @click="changeTime(7)">7日内</view>
						<view class="time-item" :class="timeIndex==15?'timeActive':''" @click="changeTime(15)">15日内
						</view>
						<view class="time-item" :class="timeIndex==30?'timeActive':''" @click="changeTime(30)">30日内
						</view>
					</view>


				</view>
			</view>
			<!-- 优惠券 -->
			<!-- 	<scroll-view scroll-x="true" show-scrollbar="false" class="discount" v-if="couponList.length > 0">
				<view class="card-box" v-for="(item, index) in couponList" :key="index">
					<view class="card" @click="getCoupon(item)">
						<view class="money">
							<view>
								<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
								<span v-else>{{ item.price }}元</span>
							</view>
						</view>
						<view class="xian"></view>
						<view class="text">
							<text>{{ "领取优惠券" }}</text>
							<text>满{{ item.consumeThreshold | unitPrice }}元可用</text>
						</view>
					</view>
				</view>
			</scroll-view> -->
			<!-- 楼层装修模式 -->
			<view v-if="pageData">
				<view v-for="(item, index) in pageData.list" :key="index">
					<view v-if="item.type == 'editor' && item.content" class="u-content"
						style="padding: 20rpx;background: #fff;width: 710rpx;margin: 0 auto;margin-top: 20rpx;font-size: 31rpx;">
						<u-parse :html="item.content" :selectable="true" :lazy-load="true" :use-cache="true"
							:show-with-animation="true" :tag-style="tagstyle"></u-parse>
					</view>
					<view v-if="item.type == 'image' && item.img"
						style="width: 710rpx;margin: 0 auto;margin-top: 20rpx;">
						<u-image :src="item.img" mode="widthFix" style="width: 710rpx;">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<!-- <image :src="item.img" mode="widthFix" style="width: 710rpx;">
						</image> -->
					</view>
					<view
						v-if="item.type == 'storeGoods' && item.options && item.options.list && item.options.list.length">
						<goods :res="item.options" />
					</view>


				</view>
			</view>
			<!-- 基础店铺模式 -->
			<div style="padding-top: 60px;width: 100vw;display: flex;justify-content: center;" v-if="loading">
				<u-loading mode="flower" :size="40"></u-loading>
			</div>
			<view style="padding-top: 20rpx;background-color: transparent !important;">
				<!-- <view style="width: 710rpx;margin: 0 auto;">
					<u-tabs :list="tabs" :active-color="mainColor" :is-scroll="false" :current="current"
						@change="changeTab"></u-tabs>
				</view> -->

				<view class="content">
					<u-empty style='margin-top:100rpx' v-if="isEmpty" class="empty" text='暂无商品信息'></u-empty>
					<goodsTemplate style="width:100%;" v-else :res="goodsList" :storeName="false" />
				</view>
				<!-- 全部分类 -->
				<view class="category" v-if="current == 1">
					<view class="category-item" v-for="(item,index) in categoryList" :key="index">
						<view class="flex" @click="getCategoryGoodsList(item)">
							<view>{{item.labelName}}</view>
							<view>
								<u-icon color="#999" name="arrow-right"></u-icon>
							</view>
						</view>
						<!-- 分类子级 -->
						<view class="child-list" v-if="item.children && item.children.length!=0">
							<view class="child" @click="getCategoryGoodsList(child)" :key='i'
								v-for="(child,i) in item.children">{{child.labelName}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-no-network></u-no-network>
			<view @click="showQrcode = false" v-if="showQrcode"
				style="width: 100vw;height: 100vh;position: fixed;background: rgba(0, 0, 0, 0.9);display: flex;align-items: center;flex-direction: column;z-index: 999999;top: 0;justify-content: center;">
				<image show-menu-by-longpress :src="qrcodeImg" style="width: 500rpx;height: 500rpx;"></image>
				<view style="color: red;margin-top: 31rpx;">
					长按保存二维码
				</view>
			</view>
		</view>
		<u-popup v-model="vipShow" mode="center" bgColor='transparent'>
			<view class="sign-showa">
				<view style="margin-top: 46rpx;font-size:35rpx;color: #333333;">电话授权提示</view>
				<view style="margin-top: 15rpx;font-size: 31rpx;color: #666666;width: 500rpx;">
					为了方便联系客服，需要访问您的通讯录及电话权限，您如果拒绝开将无法使用上述功能。</view>
				<view class="vipshow-buta">
					<view class="cal-buta" @click="vipShow=false">取消</view>
					<view class="sub-buta" @click="callPhoneA">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 引用组件
	import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
	import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块
	import tpl_left_one_right_two from "@/pages/tabbar/home/template/tpl_left_one_right_two"; //左一右二模块
	import tpl_left_two_right_one from "@/pages/tabbar/home/template/tpl_left_two_right_one"; //左二右一模块
	import tpl_top_one_bottom_two from "@/pages/tabbar/home/template/tpl_top_one_bottom_two"; //上一下二模块
	import tpl_top_two_bottom_one from "@/pages/tabbar/home/template/tpl_top_two_bottom_one"; //上二下一模块
	import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块
	import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块
	import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块
	import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块
	import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块
	import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板
	import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
	import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
	import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
	import tpl_goods from "./shopHot.vue"; //商品分类以及分类中的商品
	import goodsTemplate from '@/components/m-goods-list/list'
	import {
		getStoreBaseInfo,
		getStoreCategory
	} from "@/api/store.js";
	import {
		receiveCoupons,
		deleteStoreCollection,
		collectionStore,
		getStoreIsCollect,
	} from "@/api/members.js";
	import config from "@/config/config";

	import {
		getGoodsList
	} from "@/api/goods.js";
	import {
		getAllCoupons
	} from "@/api/promotions.js";
	import {
		getFloorStoreData
	} from "@/api/home"; //获取楼层装修接口
	import {
		getMpCode,
	} from "@/api/goods";
	export default {
		data() {
			return {
				vipShow: false,
				loading: false,
				timeIndex: 0,
				showTime: false,
				isEmpty: false,
				showQrcode: false,
				qrcodeImg: "",
				tagstyle: {
					p: 'font-size:31rpx !important;text-align: left !important;',
					span: 'font-size:31rpx !important;text-align: left !important;',
					img: "display:block !important;width: 100% !important;"
				},
				config,
				pageData: "", //楼层页面数据
				enablePageData: false, //是否显示楼层装修内容
				basePageData: false, //基础店铺信息
				scrollTop: 0,
				mainColor: this.$mainColor, //主色调
				current: 0, //初始tabs的索引
				tabs: [{
						name: "全部商品",
					},
					{
						name: "分类查看",
					},
				], // 标签
				storeId: "",
				keyword: "",
				storeInfo: {}, //店铺详情
				isCollection: false, //是否关注
				goodsList: [], //推荐货物
				couponList: [], //优惠券列表
				categoryList: [],
				couponParams: {
					pageNumber: 1,
					pageSize: 50,
					storeId: "",
				},
				filterIndex: 1,
				goodsParams: {
					pageNumber: 1,
					pageSize: 10,
					storeId: "",
					sort: "createTime",
					order: "desc",
					today: ''
				},
			};
		},
		components: {
			carousel: tpl_banner,
			titleLayout: tpl_title,
			leftOneRightTwo: tpl_left_one_right_two,
			leftTwoRightOne: tpl_left_two_right_one,
			topOneBottomTwo: tpl_top_one_bottom_two,
			topTwoBottomOne: tpl_top_two_bottom_one,
			flexThree: tpl_flex_three,
			flexFive: tpl_flex_five,
			flexFour: tpl_flex_four,
			flexTwo: tpl_flex_two,
			textPicture: tpl_text_picture,
			menuLayout: tpl_menu,
			search: tpl_search,
			flexOne: tpl_flex_one,
			goods: tpl_goods,
			group: tpl_group,
			goodsTemplate
			// spike: tpl_spike,
			// joinGroup: tpl_join_group,
			// integral: tpl_integral,
		},
		watch: {
			current(val) {
				val == 0 ?
					() => {
						this.goodsList = [];
						this.getGoodsData();
					} :
					this.getCategoryData();
			},
		},

		/**
		 * 加载
		 */
		async onLoad(options) {
			if (options.scene) {
				this.storeId = options.scene;
			} else {
				this.storeId = options.id;
			}

			console.log(this.storeId, 'this.storeId')
			this.goodsParams.storeId = options.id;
			this.couponParams.storeId = options.id;
			this.getCode()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			this.init();
		},
		mounted() {
			// #ifdef MP-WEIXIN
			// 小程序默认分享
			uni.showShareMenu({
				withShareTicket: true,
			});
			// #endif
			this.init();
		},

		// 下拉加载
		onReachBottom() {
			this.goodsParams.pageNumber++;
			this.getGoodsData();
		},

		methods: {
			changeTime(index) {
				this.timeIndex = index
				this.showTime = false
				this.goodsList = [];
				this.goodsParams.pageNumber = 1;
				this.getGoodsData();
			},
			tabClick(data, index) {
				this.goodsList = [];
				this.goodsParams.pageNumber = 1;
				this.filterIndex = index
				this.goodsParams.sort = data;
				if (data === "price") {
					this.goodsParams.order === "desc" ?
						(this.goodsParams.order = "asc") :
						(this.goodsParams.order = "desc");
				} else {
					this.goodsParams.order = "desc";
				}
				this.getGoodsData();
			},
			async getCode() {

				let page = `pages/product/shopPage`;
				let scene = this.storeId;
				let result = await getMpCode({
					page,
					scene
				});
				console.log(123, result);
				let callback = result.data.result;
				this.qrcodeImg = `data:image/png;base64,${callback}`
			},
			callPhone(phone) {

				if (!uni.getStorageSync('phoneAuth')) {
					this.vipShow = true
				} else {
					this.callPhoneA()
				}
			},
			callPhoneA() {
				this.vipShow = false
				uni.setStorageSync('phoneAuth', '1');
				uni.makePhoneCall({
					phoneNumber: this.storeInfo.linkPhone
				})
			},
			talk() {
				this.$options.filters.talkIm(this.storeInfo.storeId)
			},
			back() {
				uni.navigateBack();
			},
			/**
			 * 实例化首页数据楼层
			 */
			initPageData() {
				this.pageData = "";
				getFloorStoreData({
					pageType: "STORE",
					num: this.storeId,
				}).then((res) => {
					if (res.data.success && res.data.result) {
						this.pageData = JSON.parse(res.data.result.pageData);
						console.log(this.pageData);
					}
				});
			},
			getStoreLicencePhoto() {
				uni.navigateTo({
					url: `/pages/product/licencePhoto?id=${this.storeId}`,
				});
			},
			/**
			 * 初始化信息
			 */
			init() {
				this.goodsList = [];
				this.categoryList = [];
				this.couponList = [];
				this.goodsParams.pageNumber = 1;
				if (this.$options.filters.isLogin("auth")) {
					this.enableGoodsIsCollect();
				}
				// 店铺信息
				this.initPageData()
				this.getStoreData();
			},
			/**
			 * 联系客服
			 */
			linkKefuDetail() {
				// 客服
				// #ifdef MP-WEIXIN

				const params = {
					// originalPrice: this.goodsDetail.original || this.goodsDetail.price,
					uuid: storage.getUuid(),
					token: storage.getAccessToken(),
					sign: this.storeInfo.yzfSign,
					mpSign: this.storeInfo.yzfMpSign,
				};
				uni.navigateTo({
					url: "/pages/mine/im/index"
				});
				// uni.navigateTo({
				//   url:
				//     "/pages/product/customerservice/index?params=" +
				//     encodeURIComponent(JSON.stringify(params)),
				// });
				// // #endif
				// // #ifndef MP-WEIXIN
				// const sign = this.storeInfo.yzfSign;
				// uni.navigateTo({
				//   url:
				//     "/pages/tabbar/home/web-view?src=https://yzf.qq.com/xv/web/static/chat/index.html?sign=" +
				//     sign,
				// });
				// #endif
			},

			/** 获取店铺分类 */
			async getCategoryData() {
				let res = await getStoreCategory(this.storeId);
				if (res.data.success) {
					this.categoryList = res.data.result;
				}
			},
			/**是否收藏店铺 */
			async enableGoodsIsCollect() {
				let res = await getStoreIsCollect("STORE", this.storeId);
				if (res.data.success) {
					this.isCollection = res.data.result;
				}
			},

			/**商品分类中商品集合 */
			getCategoryGoodsList(val) {
				uni.navigateTo({
					url: `/pages/product/shopPageGoods?title=${val.labelName}&id=${val.id}&storeId=${this.storeId}`,
				});
			},

			/**
			 * 搜索
			 */
			search() {
				uni.navigateTo({
					url: `/pages/navigation/search/searchPage?storeId=${this.storeId}&keyword=${this.keyword}`,
				});
			},

			/** 点击tab */
			changeTab(index) {
				this.current = index;
			},

			/**
			 * 店铺信息
			 */
			async getStoreData() {
				let res = await getStoreBaseInfo(this.storeId);
				if (res.data.success) {
					this.storeInfo = res.data.result;
					// 优惠券信息
					this.getCouponsData();
					if (res.data.result.pageShow == '1') {
						// 开启了楼层装修店铺
						this.initPageData();
						this.enablePageData = true;
					} else {
						// 商品信息
						this.getGoodsData();
						// 店铺分类
						this.getCategoryData();

						this.basePageData = true;
					}
				} else {
					uni.reLaunch({
						url: "/",
					});
				}
			},

			/** 加载商品 */
			async getGoodsData() {
				this.loading = true
				this.isEmpty = false
				if (this.timeIndex) {
					this.goodsParams.today = this.timeIndex
				} else {
					this.goodsParams.today = ''
				}
				let res = await getGoodsList(this.goodsParams);
				if (res.data.success) {
					this.goodsList.push(...res.data.result.records);
					this.loading = false
					this.isEmpty = !this.goodsList.length
				}
			},

			/** 加载优惠券 */
			async getCouponsData() {
				this.couponParams.storeId = this.storeId;
				let res = await getAllCoupons(this.couponParams);
				if (res.data.success) {
					this.couponList.push(...res.data.result.records);
				}
			},



			/**
			 *  是否收藏
			 */
			whetherCollection() {
				if (this.isCollection) {
					deleteStoreCollection(this.storeId).then((res) => {
						if (res.data.success) {
							this.isCollection = false;
							uni.showToast({
								icon: "none",
								duration: 3000,
								title: "取消关注成功！",
							});
						}
					});
				} else {
					collectionStore(this.storeId).then((res) => {
						if (res.data.success) {
							this.isCollection = true;
							uni.showToast({
								icon: "none",
								duration: 3000,
								title: "关注成功！",
							});
						}
					});
				}
			},

			/**
			 * 领取
			 */
			getCoupon(item) {
				if (!this.$options.filters.isLogin("auth")) {
					uni.showToast({
						icon: "none",
						duration: 3000,
						title: "请先登录！",
					});

					this.$options.filters.navigateToLogin("redirectTo");
					return false;
				}
				receiveCoupons(item.id).then((res) => {
					if (res.data.success) {
						uni.showToast({
							icon: "none",
							duration: 3000,
							title: "领取成功！",
						});
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.shop-page {
		width: 100vw;
		min-height: 100vh;
		background: #F3F5F9;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 31rpx);
	}

	.navbar {
		display: flex;
		width: 100%;
		height: 80rpx;
		background: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
		z-index: 10;
		position: relative;

		// position: fixed;
		// left: 0;
		// top: var(--status-bar-height);
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			color: $font-color-dark;
			position: relative;
		}

		.time-pop {
			position: absolute;
			left: 0;
			right: 0;
			height: 200rpx;
			bottom: -200rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			background: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.time-list {
				width: 100vw;
				display: flex;
				align-items: center;
				justify-content: space-around;

			}

			.time-item {
				width: 200rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				font-size: 25rpx;
				background: #d4d5d8;
				border-radius: 30rpx;

			}

			.timeActive {
				background: #ff3c2a;
				color: #fff;

			}
		}

		.index-nav-arrow:last-child {
			margin-top: -22rpx;
		}

		.img {
			width: 26rpx;
			height: 26rpx;
		}

		.current {
			color: #ff3c2a;
			position: relative;
			// &:after {
			// 	content: '';
			// 	position: absolute;
			// 	left: 50%;
			// 	bottom: 0;
			// 	transform: translateX(-50%);
			// 	width: 40rpx;
			// 	height: 0;
			// 	border-bottom: 4rpx solid $light-color;
			// }
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				height: 14rpx;
				line-height: 1;
				margin-left: 4rpx;
				font-size: 26rpx;
				color: #888;
			}

			.xia {
				transform: scaleY(-1);
			}
		}
	}

	.wrapper {
		background: #fff;
		padding: 21rpx;
	}


	.u-content {
		font-size: 31rpx !important;

		/deep/ p {
			font-size: 31rpx !important;
			text-align: left !important;
		}

		/deep/ span {
			font-size: 31rpx !important;
			text-align: left !important;
		}

		/deep/ img {
			display: block !important;
			width: 100%;
		}


	}

	/deep/ img {
		width: 100%;
	}

	.store {
		align-items: center;

		>.box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 30rpx;
			font-size: 24rpx;
			color: #999;
			flex: 2;

			>.store-name {
				font-size: 34rpx;
				color: #333;
				letter-spacing: 1rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
			}

			>.store-message {
				margin-top: 10rpx;

				>view {
					font-size: 22rpx;
					// margin: 0 5rpx;

					>span {
						font-size: 26rpx;
						font-weight: bold;
						color: #333;
						margin-right: 8rpx;
					}
				}
			}
		}
	}

	.collection-btn {
		background: $main-color;
		padding: 6rpx 0;
		width: 130rpx;
		font-size: 22rpx;
		color: #fff;
		border-radius: 100px;
		text-align: center;
	}

	.store-desc {
		margin: 40rpx 0 0 0;
		color: #999;
	}

	.content {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		>.empty {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
		}

		.item {
			overflow: hidden;

			background: #fff;
			width: 49%;
			height: 484rpx;
			font-size: 26rpx;
			display: flex;
			flex-direction: column;
			border: 1px solid #f8f8f8;
			margin-bottom: 20rpx;

			.name {
				text-align: left !important;
				color: #333;
				padding: 0 20rpx;
				margin-top: 20rpx;
				height: 80rpx;
				overflow: hidden;
			}

			.price {
				font-weight: 500;
				color: $main-color;
				font-size: 30rpx;
				padding: 0 20rpx;
				margin-top: 20rpx;
				white-space: nowrap;
			}

			.buyCount {
				display: flex;
				padding: 0 20rpx;
				font-size: 24upx;
				justify-content: space-between;
				color: #999;
			}
		}
	}

	.discount {
		height: 154rpx;
		border-top: 1px solid #f6f6f6;
		border-bottom: 18rpx solid #f6f6f6;
		background: #f6f6f6;
		overflow: hidden;
		white-space: nowrap;

		.card-box {
			display: inline-block;
			padding-top: 25rpx;
		}

		.card {
			width: 324rpx;
			height: 116rpx;
			background: #fff;
			margin-left: 20rpx;
			border-radius: 5px;
			display: flex;
			align-items: center;

			.money {
				width: 45%;
				color: #fd6466;
				font-weight: 500;
				text-align: center;

				text {
					font-size: 50rpx;
				}
			}

			.xian {
				height: 66rpx;
				border: 1px dashed #f6f6f6;
				position: relative;

				&:before,
				&:after {
					content: "";
					width: 22rpx;
					height: 12rpx;
					position: absolute;
					background: #f6f6f6;
				}

				&:before {
					border-radius: 0 0 22rpx 22rpx;
					top: -30rpx;
					left: -10rpx;
				}

				&:after {
					border-radius: 22rpx 22rpx 0 0;
					bottom: -30rpx;
					left: -10rpx;
				}
			}

			.text {
				flex: 1;
				color: $aider-light-color;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				margin-left: 14rpx;

				text:nth-of-type(2) {
					color: #ccc;
				}

				.cur:nth-of-type(1) {
					color: #ccc;
				}
			}
		}
	}

	.category-item {
		background: #fff;
		padding: 22rpx;
		margin: 20rpx 10rpx;

		>.flex {
			color: #666;
			justify-content: space-between;
		}

		>.child-list {
			display: flex;
			margin: 20rpx 0;
			flex-wrap: wrap;

			>.child {
				justify-content: center;
				margin: 1% 0;
				display: flex;
				width: 48%;
				font-size: 24rpx;
				color: #999;
				margin-right: 1%;
				border: 1rpx solid #ededed;
				box-sizing: border-box;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
			}
		}
	}

	.kefu {
		background: #f7f7f7;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 32rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #999;
	}

	.sign-showa {
		background: #FFFFFF;
		border-radius: 19px;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		font-size: 35rpx;
		width: 600rpx;
		position: relative;
		padding-bottom: 130rpx;
	}

	.vipshow-buta {
		width: 100%;
		position: absolute;
		bottom: 0;
		display: flex;
		flex-direction: row;
		font-size: 25rpx;
	}

	.cal-buta {
		flex: 1;
		line-height: 85rpx;
		/* border-radius: 0px 0px 0px 19rpx; */
		border-top: 1px solid #D8D8D8;
		text-align: center;
		color: #333333;
	}

	.sub-buta {
		flex: 1;
		line-height: 85rpx;
		background: #E1241B;
		border-radius: 0px 0px 0px 0px;
		text-align: center;
		color: #FFFFFF;
	}
</style>